<script setup lang="ts">
import Card from "@/components/Card/index.vue";
import { textValue } from "@/utils/index";
import { missingService } from "@/service/missing";
import { useMessage } from "wot-design-uni";
import Picker from "@/components/Picker/index.vue";

const message = useMessage();

const uiConfig = {
	labelSpan: 6,
	valueSpan: 18,
};

const props = defineProps<{
	showTitle?: boolean;
	type?: "show" | "edit";
	data?;
	disabled?: boolean;
}>();
const emits = defineEmits(["update:data", "submit"]);

const pickerColumns = ref([]);

// 车单是否允许为空
const isCarEmpty = ref(false);

const handleChangeFormItem = (val, key) => {
	if (val === props.data?.[key]) {
		return;
	}
	if (key === "mainOrderNumber") {
		pickerColumns.value = [];
		isCarEmpty.value = false;
		handleChangeFormItem(null, "carNumber");
	}

	const _d = props.data;
	_d[key] = val;
	emits("update:data", _d);
};

const handleSubmit = () => {
	if (!isCarEmpty.value && !props.data?.carNumber) {
		emits("submit");
	}
};

/* watch(
	() => props.data?.mainOrderNumber,
	async () => {
		try {
			const rs = await missingService.getCarListByMainOrderNumber({
				mainOrderNumber: props.data?.mainOrderNumber,
			});
			if (rs && rs.length > 0) {
				pickerColumns.value = rs?.map((item) => ({ label: item, value: item }));
			} else if (rs.length === 0) {
				isCarEmpty.value = true;
			}
		} catch (error) {
			console.log(error);
		}
	},
	{ immediate: true },
); */
</script>

<template>
	<Card class="storage-card-container">
		<template v-if="props.showTitle">
			<view class="title">基础信息</view>
		</template>

		<template v-if="props.type === 'show' || props.disabled">
			<wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">主单号</wd-col>
				<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
					textValue(props.data?.mainOrderNumber)
				}}</wd-col>
			</wd-row>
		</template>

		<template v-else-if="props.type === 'edit'">
			<wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">主单号</wd-col>
				<wd-col :span="uiConfig.valueSpan" class="flex">
					<wd-input
						:modelValue="props.data?.mainOrderNumber"
						@update:modelValue="
							(v) => handleChangeFormItem(v, 'mainOrderNumber')
						"
						:min="0"
						:style="{ width: '100%' }"
					/>
					<!-- <wd-button
						class="all-btn"
						type="primary"
						size="small"
						:round="false"
						@click="handleSubmit"
						>确定查询</wd-button
					> -->
				</wd-col>
			</wd-row>
			<!-- <wd-row class="row">
				<wd-col :span="uiConfig.labelSpan">车单号</wd-col>
				<wd-col :span="uiConfig.valueSpan">
					<Picker
						:value="props.data?.carNumber"
						@update:value="(v) => handleChangeFormItem(v, 'carNumber')"
						:columns="pickerColumns"
						:disabled="pickerColumns.length === 0"
					/>
					<view class="tip"></view>
				</wd-col>
			</wd-row> -->
		</template>
	</Card>

	<wd-message-box />
</template>

<style lang="less" scoped>
@import url("../style/card.less");
@import url("../style/row.less");
@import url("../style/form.less");
</style>
